<template>
  <div>
    <h2>作业题目管理</h2>
    <el-table :data="questionList" style="width: 100%">
      <el-table-column prop="questionId" label="题目ID" width="240"/>
      <el-table-column prop="title" label="题目标题"/>
      <el-table-column prop="difficulty" label="难度">
        <template #default="{ row }">
          <span v-if="row.difficulty === 1">简单</span>
          <span v-else-if="row.difficulty === 2">中等</span>
          <span v-else-if="row.difficulty === 3">困难</span>
        </template>
      </el-table-column>
      <el-table-column  label="操作">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="goToDetail(row.questionId)">进入</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getHomeworkUserDTOService } from '@/apis/homework'

const route = useRoute()
const router = useRouter()
const examId = route.params.examId || route.query.examId
const questionList = ref([])

onMounted(async () => {
  if (examId) {
    const res = await getHomeworkUserDTOService(examId)
    if (res.code === 1000) {
      questionList.value = res.data || []
    }
  }
})

function goToDetail(questionId) {
  const courseId = route.query.courseId
  const examId = route.params.examId || route.query.examId
  router.push({ name: 'questionDetail', params: { questionId }, query: { courseId, examId } })
}
</script>
